<template>
	<view>
		<!-- 定位 -->
		<view class="search-view">
			<image src="../../../static/search/position.png" mode="widthFix"></image>
			<text class="search-text">阿里巴巴淘宝城2期西溪园区</text>
			<text>></text>
		</view>
		<!-- 搜索 -->
		<view class="search-cont">
			<view class="search">
				<image src="../../../static/search/search.png" mode="widthFix" class="search-img"></image>
				<input type="text" value="" placeholder="麻辣烫" disabled=""/>
			</view>
		</view>
		<!-- 自定义轮播 -->
		<view class="swiper-view">
			<swiper :autoplay="false" duration="1000" @change="swiperChange">
				<block v-for="(item,index) in swiper" :key="index">
					<swiper-item>
						<view class="swiper-item">
							<block v-for="(it,inx) in item" :key="inx">
								<view class="content-img">
									<image :src="it.img" mode="widthFix" class="uploadimg"></image>
									<text>{{it.titlt}}</text>
								</view>
							</block>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- 面板指示点-->
		<view class="instruct-view">
			<block v-for="(point,index) in swiper" :key="index">
				<view class="instruct" :class="{activeColor:num==index}"></view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiper:[
					[
						{
							'img':'/static/swiper/外卖.png',
							'titlt':'外卖'
						},{
							'img':'/static/swiper/美食.png',
							'titlt':'美食'
						},{
							'img':'/static/swiper/酒店.png',
							'titlt':'酒店'
						},{
							'img':'/static/swiper/娱乐.png',
							'titlt':'娱乐'
						},{
							'img':'/static/swiper/电影.png',
							'titlt':'电影'
						},{
							'img':'/static/swiper/外卖.png',
							'titlt':'外卖'
						},{
							'img':'/static/swiper/外卖.png',
							'titlt':'外卖'
						},{
							'img':'/static/swiper/外卖.png',
							'titlt':'外卖'
						},{
							'img':'/static/swiper/外卖.png',
							'titlt':'外卖'
						},{
							'img':'/static/swiper/外卖.png',
							'titlt':'外卖'
						},
					],
					[
						{
							'img':'/static/swiper/打车2.png',
							'titlt':'打车'
						},{
							'img':'/static/swiper/01买菜做饭.png',
							'titlt':'买菜做饭'
						},{
							'img':'/static/swiper/买药品.png',
							'titlt':'买药'
						},{
							'img':'/static/swiper/外卖.png',
							'titlt':'外卖'
						},{
							'img':'/static/swiper/外卖.png',
							'titlt':'外卖'
						},{
							'img':'/static/swiper/外卖.png',
							'titlt':'外卖'
						},{
							'img':'/static/swiper/外卖.png',
							'titlt':'外卖'
						},{
							'img':'/static/swiper/外卖.png',
							'titlt':'外卖'
						},{
							'img':'/static/swiper/外卖.png',
							'titlt':'外卖'
						},{
							'img':'/static/swiper/外卖.png',
							'titlt':'外卖'
						},
					]
				],
				num:0
			}
		},
		methods: {
			swiperChange(e){
				// console.log(e.detail.current);
				this.num=e.detail.current
			}
		}
	}
</script>

<style scoped>
.search-view image{
	width: 35rpx;
	height: 35rpx;
	margin-left: 20rpx;
}
.search-view{
	font-size: 30rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	height: 80rpx;
}
.search-text{
	padding: 0 10rpx;
}
.search-img{
	width: 40rpx;
	height: 40rpx;
	margin: 0 10rpx 0 20rpx;
}
.search{
	display: flex;
	align-items: center;
	background-color: #eff3f4;
	width: 95%;
	height: 70rpx;
	line-height: 70rpx;
	border-radius: 10rpx;
}
.search input{
	font-size: 25rpx;
	width: 100%;
	color: #666666;
	height: 70rpx;
	line-height: 70rpx;
}
.search-cont{
	display: flex;
	justify-content: center;
	width: 100%;
}
.swiper{
	height: 320rpx !important;
}
.swiper-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	height: 320rpx;
}
.content-img{
	width: calc((100% / 5) - 12px) !important;
	margin: 6rpx;
	position: relative;
	text-align: center;
}
.content-img text{
	padding-top: 20rpx;
	font-size: 25rpx;
}
.uploadimg{
	width: 70rpx;
	height: 70rpx;
	border-radius: 50rpx;
	display: block;
	margin: 0 auto;
}
.instruct-view{
	display: flex;
	justify-content: center;
	/* padding-top: 10rpx; */
}
.instruct{
	background-color: #e6e6e6;
	width: 30rpx;
	height: 10rpx;
	border-radius: 50rpx;
	margin: 0 10rpx;
}
.activeColor{
	background-color: #fbae22 !important;
}
</style>
